---
title: Alert
menu: Components
order: 10
---

import { Alert } from 'smooth-ui-sc-next'
import { Props } from '../../components/Props'

# Alert

## Variants

Set variants using `variant` prop. All colors defined in your theme (or not) can be used.

```jsx live noInline
import React from 'react'
import { Alert, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Alert variant="primary">This is a primary alert—check it out!</Alert>
      <Alert variant="secondary">This is a secondary alert—check it out!</Alert>
      <Alert variant="success">This is a success alert—check it out!</Alert>
      <Alert variant="danger">This is a danger alert—check it out!</Alert>
      <Alert variant="warning">This is a warning alert—check it out!</Alert>
      <Alert variant="info">This is a info alert—check it out!</Alert>
      <Alert variant="light">This is a light alert—check it out!</Alert>
      <Alert variant="dark">This is a dark alert—check it out!</Alert>
      <Alert variant="#804FCE">Custom color</Alert>
    </Boxer>
  )
}

render(<Example />)
```

## Accessibility

`Alert` follows [WAI-ARIA Alert Pattern](https://www.w3.org/TR/wai-aria-practices/#alert).

- The role `alert` is automatically added

## API

### Alert

<Props of={Alert} />
